﻿
@{
    ViewBag.Title = "Tree View";
    Layout = "~/Areas/Demo/Views/Shared/Demo_Layout.cshtml";
}

<div class="row">
    <div class="col-lg-12">
        <h1 class="page-header">Tree View</h1>
    </div>
</div>

<div class="row">
    <div class="col-lg-6">
        <div class="panel panel-default">
            <div class="panel-heading">
                treeview
            </div>
            <div class="panel-body">
                <link href="~/bower_components/bootstrap-treeview-master/bootstrap-treeview.min.css" rel="stylesheet" />
                <a href="http://www.htmleaf.com/jQuery/Menu-Navigation/201502141379.html" target="_blank">中文API</a>
                <div id="TreeViewCheck"></div>
                <button type="button" class="btn btn-primary" onclick="alert(JSON.stringify($('#TreeViewCheck').treeview_check.getChecked()))">
                    ShowCheck
                </button>
                <button type="button" class="btn btn-primary" onclick="setcheck()">
                    SetCheck
                </button>
                <script src="~/bower_components/bootstrap-treeview-master/bootstrap-treeview.min.js"></script>
                <script src="~/Scripts/Common/treeview.js"></script>
                <script type="text/javascript">
                    var tree = [{
                        text: "Parent 1", nodes: [{
                            text: "Child 1", nodes: [{
                                text: "Grandchild 1"
                            },
                            {
                                text: "Grandchild 2"
                            }]
                        }, { text: "Child 2" }]
                    },
                        {
                            text: "Parent 2", nodes: [{
                                text: "Child 3", nodes: [{
                                    text: "Grandchild 3"
                                },
                                {
                                    text: "Grandchild 4"
                                }]
                            }, {
                                text: "Child 4", nodes: [{
                                    text: "Grandchild 5"
                                },
                                    {
                                        text: "Grandchild 6"
                                    }]
                            }]
                        }, { text: "Parent 3" }, { text: "Parent 4" }, { text: "Parent 5" }];
                    var list = [{ id: 1, text: "Parent 1", parent: 0 },
                    { id: 2, text: "Child 1", parent: 1 },
                    { id: 3, text: "Grandchild 1", parent: 2 },
                    { id: 4, text: "Grandchild 2", parent: 2 },
                    { id: 5, text: "Child 2", parent: 1 },
                    { id: 6, text: "Parent 2", parent: 0 },
                    { id: 7, text: "Child 3", parent: 6 },
                    { id: 8, text: "Grandchild 3", parent: 7 },
                    { id: 9, text: "Grandchild 4", parent: 7 },
                    { id: 10, text: "Child 4", parent: 6 },
                    { id: 11, text: "Grandchild 5", parent: 10 },
                    { id: 12, text: "Grandchild 6", parent: 10 },
                    { id: 13, text: "Parent 3", parent: 0 },
                    { id: 14, text: "Parent 4", parent: 0 },
                    { id: 14, text: "Parent 5", parent: 0 }];
                    var checkid = [1];
                    var d = $.arraytotree(list, {
                        id: "id",
                        text: "text",
                        parentId: "parent",
                        creatNode: function (i, item) {
                            item.text = item.text + "|" + i + ";";
                            if ($.inArray(item.id, checkid) != -1) {
                                if (!item.state) {
                                    item.state = {};
                                }
                                item.state.checked = true;
                            }
                        }
                    });
                    $(function () {
                        $("#TreeViewCheck").treeview_check({
                            levels: 3,
                            //data: tree
                            data:d
                        });
                    });
                    function setcheck() {
                        var nodeId = 6;
                        $('#TreeViewCheck').treeview_check.getNodeData({ nodes: d }, 0);
                        var a = $('#TreeViewCheck').treeview_check.nodes_data;
                        alert(JSON.stringify(a));
                        //$('#TreeViewCheck').treeview('checkNode', [nodeId]);
                    }
                </script>
            </div>
        </div>
    </div>

    <div class="col-lg-6">
        <div class="panel panel-default">
            <div class="panel-heading">
                ztree
            </div>
            <div class="panel-body">
                <a href="http://www.treejs.cn/v3/api.php" target="_blank">中文API</a>
                <link href="~/bower_components/zTree/css/zTreeStyle/metro.css" rel="stylesheet" />

                <div class="form-group">
                    <label for="ztree_search">搜索</label>
                    <input type="text" class="form-control" id="ztree_search" name="ztree_search" />
                </div>
                <button type="button" class="btn btn-primary" onclick="ztree_search()">查询</button>
                <ul id="tree" class="ztree" style="width:560px; overflow:auto;"></ul>

                <script src="~/bower_components/zTree/js/jquery.ztree.all-3.5.min.js"></script>
                <script src="~/Scripts/Common/ztree_extend.js?v=1"></script>
                <script>

                    var newCount = 0;
                    var zNodes = [
                        { id: 1, pId: 0, name: "[core] 基本功能 演示", open: true },
                        { id: 101, pId: 1, name: "最简单的树 --  标准 JSON 数据", file: "core/standardData" },
                        { id: 102, pId: 1, name: "最简单的树 --  简单 JSON 数据", file: "core/simpleData" },
                        { id: 103, pId: 1, name: "不显示 连接线", file: "core/noline" },
                        { id: 104, pId: 1, name: "不显示 节点 图标", file: "core/noicon" },
                        { id: 105, pId: 1, name: "自定义图标 --  icon 属性", file: "core/custom_icon" },
                        { id: 106, pId: 1, name: "自定义图标 --  iconSkin 属性", file: "core/custom_iconSkin" },
                        { id: 107, pId: 1, name: "自定义字体", file: "core/custom_font" },
                        { id: 115, pId: 1, name: "超链接演示", file: "core/url" },
                        { id: 108, pId: 1, name: "异步加载 节点数据", file: "core/async" },
                        { id: 109, pId: 1, name: "用 zTree 方法 异步加载 节点数据", file: "core/async_fun" },
                        { id: 110, pId: 1, name: "用 zTree 方法 更新 节点数据", file: "core/update_fun" },
                        { id: 111, pId: 1, name: "单击 节点 控制", file: "core/click" },
                        { id: 112, pId: 1, name: "展开 / 折叠 父节点 控制", file: "core/expand" },
                        { id: 113, pId: 1, name: "根据 参数 查找 节点", file: "core/searchNodes" },
                        { id: 114, pId: 1, name: "其他 鼠标 事件监听", file: "core/otherMouse" },

                        { id: 2, pId: 0, name: "[excheck] 复/单选框功能 演示", open: false },
                        { id: 201, pId: 2, name: "Checkbox 勾选操作", file: "excheck/checkbox" },
                        { id: 206, pId: 2, name: "Checkbox nocheck 演示", file: "excheck/checkbox_nocheck" },
                        { id: 207, pId: 2, name: "Checkbox chkDisabled 演示", file: "excheck/checkbox_chkDisabled" },
                        { id: 208, pId: 2, name: "Checkbox halfCheck 演示", file: "excheck/checkbox_halfCheck" },
                        { id: 202, pId: 2, name: "Checkbox 勾选统计", file: "excheck/checkbox_count" },
                        { id: 203, pId: 2, name: "用 zTree 方法 勾选 Checkbox", file: "excheck/checkbox_fun" },
                        { id: 204, pId: 2, name: "Radio 勾选操作", file: "excheck/radio" },
                        { id: 209, pId: 2, name: "Radio nocheck 演示", file: "excheck/radio_nocheck" },
                        { id: 210, pId: 2, name: "Radio chkDisabled 演示", file: "excheck/radio_chkDisabled" },
                        { id: 211, pId: 2, name: "Radio halfCheck 演示", file: "excheck/radio_halfCheck" },
                        { id: 205, pId: 2, name: "用 zTree 方法 勾选 Radio", file: "excheck/radio_fun" },

                        { id: 3, pId: 0, name: "[exedit] 编辑功能 演示", open: false },
                        { id: 301, pId: 3, name: "拖拽 节点 基本控制", file: "exedit/drag" },
                        { id: 302, pId: 3, name: "拖拽 节点 高级控制", file: "exedit/drag_super" },
                        { id: 303, pId: 3, name: "用 zTree 方法 移动 / 复制 节点", file: "exedit/drag_fun" },
                        { id: 304, pId: 3, name: "基本 增 / 删 / 改 节点", file: "exedit/edit" },
                        { id: 305, pId: 3, name: "高级 增 / 删 / 改 节点", file: "exedit/edit_super" },
                        { id: 306, pId: 3, name: "用 zTree 方法 增 / 删 / 改 节点", file: "exedit/edit_fun" },
                        { id: 307, pId: 3, name: "异步加载 & 编辑功能 共存", file: "exedit/async_edit" },
                        { id: 308, pId: 3, name: "多棵树之间 的 数据交互", file: "exedit/multiTree" },

                        { id: 4, pId: 0, name: "大数据量 演示", open: false },
                        { id: 401, pId: 4, name: "一次性加载大数据量", file: "bigdata/common" },
                        { id: 402, pId: 4, name: "分批异步加载大数据量", file: "bigdata/diy_async" },
                        { id: 403, pId: 4, name: "分批异步加载大数据量", file: "bigdata/page" },

                        { id: 5, pId: 0, name: "组合功能 演示", open: false },
                        { id: 501, pId: 5, name: "冻结根节点", file: "super/oneroot" },
                        { id: 502, pId: 5, name: "单击展开/折叠节点", file: "super/oneclick" },
                        { id: 503, pId: 5, name: "保持展开单一路径", file: "super/singlepath" },
                        { id: 504, pId: 5, name: "添加 自定义控件", file: "super/diydom" },
                        { id: 505, pId: 5, name: "checkbox / radio 共存", file: "super/checkbox_radio" },
                        { id: 506, pId: 5, name: "左侧菜单", file: "super/left_menu" },
                        { id: 513, pId: 5, name: "OutLook 样式的左侧菜单", file: "super/left_menuForOutLook" },
                        { id: 507, pId: 5, name: "下拉菜单", file: "super/select_menu" },
                        { id: 509, pId: 5, name: "带 checkbox 的多选下拉菜单", file: "super/select_menu_checkbox" },
                        { id: 510, pId: 5, name: "带 radio 的单选下拉菜单", file: "super/select_menu_radio" },
                        { id: 508, pId: 5, name: "右键菜单 的 实现", file: "super/rightClickMenu" },
                        { id: 511, pId: 5, name: "与其他 DOM 拖拽互动", file: "super/dragWithOther" },
                        { id: 512, pId: 5, name: "异步加载模式下全部展开", file: "super/asyncForAll" },

                        { id: 6, pId: 0, name: "其他扩展功能 演示", open: false },
                        { id: 601, pId: 6, name: "隐藏普通节点", file: "exhide/common" },
                        { id: 602, pId: 6, name: "配合 checkbox 的隐藏", file: "exhide/checkbox" },
                        { id: 603, pId: 6, name: "配合 radio 的隐藏", file: "exhide/radio" }
                    ];

                    $(document).ready(function () {

                        var setting = {
                            check: {
                                enable: true
                            },
                            view: {
                                addHoverDom: function (treeId, treeNode) {
                                    var sObj = $("#" + treeNode.tId + "_span");
                                    if (treeNode.editNameFlag || $("#addBtn_" + treeNode.tId).length > 0) return;
                                    var addStr = "<span class='button remove' id='removeBtn_" + treeNode.tId
                                            + "' title='add node' onfocus='this.blur();'></span>";
                                    addStr += "<span class='button add' id='addBtn_" + treeNode.tId + "'></span>";
                                    addStr += "<span class='button edit' id='editBtn_" + treeNode.tId + "'></span>";
                                    sObj.after(addStr);
                                    var btn = $("#addBtn_" + treeNode.tId);
                                    if (btn) btn.bind("click", function () {
                                        var zTree = $.fn.zTree.getZTreeObj("tree");
                                        zTree.addNodes(treeNode, { id: (1000 + newCount), pId: treeNode.id, name: "new node" + (newCount++) });
                                        return false;
                                    });
                                },
                                removeHoverDom: function (treeId, treeNode) {
                                    $("#addBtn_" + treeNode.tId).unbind().remove();
                                    $("#removeBtn_" + treeNode.tId).unbind().remove();
                                    $("#editBtn_" + treeNode.tId).unbind().remove();
                                },
                                fontCss: setFontCss_ztree
                            },
                            data: {
                                simpleData: {
                                    enable: true,
                                    idKey: "id",
                                    pIdKey: "pId",
                                }
                            }
                        };
                        $.fn.zTree.init($("#tree"), setting, zNodes);

                        var zTree = $.fn.zTree.getZTreeObj("tree");
                        zTree.selectNode(zTree.getNodeByParam("id", 101));

                    });
                    function ztree_search() {
                        var searchCondition = $("#ztree_search").val();
                        $.fn.zTree.search("tree","name",searchCondition, "");
                    }
                </script>
            </div>
        </div>
    </div>
</div>
